
<section>
    <div class="container">
        <article>
            <h2>Create your customized version</h2>

            <p class="well">You can generate your <strong>customized</strong> EnlighterJS Builds by using the <a title="Promethium" href="http://promethium.andidittrich.de/">Promethium CloudBuilder</a>.
                Maybe you don't need all Theme/Languages and you want to strip down the package.
                The Builder always uses the latest EnlighterJS release and automatically compresses the files (both compressed & uncompressed builds are included!).
            </p>

            <hr />

            <form method="post" action="http://promethium.andidittrich.de/enlighterjs/" id="builder-form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><strong>Language Support</strong> <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
                            <div class="panel-body">
                                <?php foreach ($languages as $l => $d){ ?>
                                    <div class="checkbox">
                                        <label><input value="1" type="checkbox" name="Language[<?php echo $l; ?>]"><?php echo $d; ?></label>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><strong>Modern Themes</strong> <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
                            <div class="panel-body">
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Enlighter]">"Enlighter" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Eclipse]">"Eclipse" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Classic]">"Classic" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Beyond]">"Beyond" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[MooTwo]">"MooTwo" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Godzilla]">"Godzilla" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Droide]">"Droide" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Minimal]">"Minimal" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Atomic]">"Atomic" Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Rowhammer]">"Rowhammer" Theme</label>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading"><strong>Legacy Themes</strong> (Lighter.js) <small><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
                            <div class="panel-body">
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Git]">"Git" Legacy Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[MooTools]">"MooTools" Legacy Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Mocha]">"Mocha" Legacy Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Panic]">"Panic" Legacy Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Tutti]">"Tutti" Legacy Theme</label>
                                </div>
                                <div class="checkbox">
                                    <label><input value="1" type="checkbox" name="Theme[Twilight]">"Twilight" Legacy Theme</label>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading"><strong>Special Features</strong> <small class="text-right"><a class="selectall">select all</a> / <a class="selectnone">select none</a></small></div>
                            <div class="panel-body">
                                <div class="checkbox">
                                    <label><input value="1"  type="checkbox" name="Feature[Metainit]">Include the Metainit Utility for easy initialization</label>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <hr />

                <p><button class="btn btn-primary btn-lg" type="submit">Download Custom Package</button></p>
            </form>

            <script type="text/javascript">
                window.addEvent('domready', function(){
                    document.getElements('#builder-form .selectall').addEvent('click', function(){
                        this.getParent().getParent().getParent().getElements('input').set('checked', 'checked');
                    });
                    document.getElements('#builder-form .selectnone').addEvent('click', function(){
                        this.getParent().getParent().getParent().getElements('input').set('checked', false);
                    });
                });
            </script>
        </article>

    </div>
</section>